import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/**
 * 对齐布局
    简单的调整一个子元素在父元素中的位置的话，使用Align组件会更简单一些。
    Align和Stack对比
    可以看到，Align和Stack/Positioned都可以用于指定子元素相对于父元素的偏移，但它们还是有两个主要区别：
    定位参考系统不同；Stack/Positioned定位的的参考系可以是父容器矩形的四个顶点；而Align则需要先通过alignment 参数来确定坐标原点，
    不同的alignment会对应不同原点，最终的偏移是需要通过alignment的转换公式来计算出。
    Stack可以有多个子元素，并且子元素可以堆叠，而Align只能有一个子元素，不存在堆叠。
 */

class AlignCenterWidget extends StatelessWidget {
  AlignCenterWidget({
    Key ?key,
    @required this.text,
  }) : super(key: key);
  final String ?text;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(
          title: Text(text??""),
        ),
        body: Container(
          padding: EdgeInsets.only(top: 20.0),
          color: Colors.blue[50],
          child: Column(
            children: [
              Container(
                color: Colors.amber[50],
                child: Align(
                  alignment: Alignment.center,
                  child: FlutterLogo(
                    size: 40,
                  ),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Container(
                color: Colors.amber[50],
                child: Align(
                  widthFactor: 2,
                  heightFactor: 2,
                  alignment: Alignment.topRight,
                  child: FlutterLogo(
                    size: 40,
                  ),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Container(
                color: Colors.amber[50],
                child: Align(
                  widthFactor: 2,
                  heightFactor: 2,
                  alignment: Alignment(1.0, 1.0),
                  //x、y的值从-1到1分别代表矩形左边到右边的距离和顶部到底边的距离
                  child: FlutterLogo(
                    size: 40,
                  ),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Center(

                child: Text("阿里巴巴"),
              ),
              SizedBox(
                height: 20,
              ),
              Center(
                widthFactor: 5,
                heightFactor: 5,
                child: Text("腾讯帝国"),
              )
            ],
          ),
        ));
  }
}
